F2E合作社｜modal燈箱效果｜Bootstrap 5網頁框架開發入門

前言

modal 是阿拉丁，摩擦神燈後就可以召喚出強大、無所不能的精靈，想知道它還有什麼神奇魔力嗎？繼續看下去，帶你體驗 a whole new world 。

官方網站的 Modal 頁面

在開始使用導覽列之前，需要了解它們是如何運作

互動視窗是用 HTML 、 CSS 和 JavaScript 建構的。它們位於文件中任何其他內容之上，並從 <body> 中刪除滾動，以便互動視窗的內容滾動。
點擊互動視窗 backdrop 將自動關閉互動視窗。
Bootstrap 一次只支援一個互動視窗，因為認為巢狀互動視窗用戶體驗不佳。
互動視窗使用 position: fixed ，在渲染呈現上會有點特別，盡可能將互動視窗 HTML 放置在頂級位置，以避免其他元素的潛在干擾，在另一個固定元素中內加入一個 .modal 的時候，你可能會遇到問題。
由於 position: fixed ，在移動設備上使用互動視窗有一些附加說明，請參閱瀏覽器支援。
依據 HTML5 定義語義的方式， autofocus HTML 屬性對 Bootstrap 互動視窗沒有影響，要達到同樣的效果，請使用一些自訂 JavaScript ：

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})

完整範例

通過點擊按鈕切換動態視窗呈現。它將從頁面頂部向下滑動並淡入。

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
</button>


<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

靜態背景

當將背景設置為靜態時，互動視窗不會因為點擊背景而關閉。

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
    Launch static backdrop modal
</button>

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                I will not close if you click outside me. Don't even try to press escape key.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Understood</button>
            </div>
        </div>
    </div>
</div>

滾動長內容

如果內容太長的話是在頁面上捲動，但也可以透過在 .modal-dialog 中加入 .modal-dialog-scrollable 來創建一個 body 可滾動互動視窗。

<div class="modal-dialog modal-dialog-scrollable">
    ...
</div>

垂直置中

加入 .modal-dialog-centered 到 .modal-dialog 來使互動視窗垂直置中。

<div class="modal-dialog modal-dialog-centered">
    ...
</div>

使用網格

透過在 .modal-body 中加入 .container-fluid 於互動視窗中使用 Bootstrap 網格系統，然後像其他任何地方一樣使用正常的網格系統 class 。

<div class="modal-body">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
        </div>
        <div class="row">
            <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
            <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
        </div>
        <div class="row">
            <div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
        </div>
    </div>
</div>

不同的互動視窗內容

使用 event.relatedTarget 和 HTML data-bs-* 屬性，可依據點擊按鈕來導入不同動態視窗的內容。

HTML

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">Recipient:</label>
                        <input type="text" class="form-control" id="recipient-name">
                    </div>
                    <div class="mb-3">
                        <label for="message-text" class="col-form-label">Message:</label>
                        <textarea class="form-control" id="message-text"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Send message</button>
            </div>
        </div>
    </div>
</div>

JavaScript

<script>
    var exampleModal = document.getElementById('exampleModal')
    exampleModal.addEventListener('show.bs.modal', function (event) {
        // Button that triggered the modal
        var button = event.relatedTarget
        // Extract info from data-bs-* attributes
        var recipient = button.getAttribute('data-bs-whatever')
        // If necessary, you could initiate an AJAX request here
        // and then do the updating in a callback.
        //
        // Update the modal's content.
        var modalTitle = exampleModal.querySelector('.modal-title')
        var modalBodyInput = exampleModal.querySelector('.modal-body input')

        modalTitle.textContent = 'New message to ' + recipient
        modalBodyInput.value = recipient
    })
</script>

在互動視窗間切換

通過放置 data-bs-target 和 data-bs-toggle 屬性，在多個互動視窗間切換。請注意不能同時打開多個互動視窗，這種方法只能在兩個單獨的模態之間切換。

下方案例，點選 Open second modal 即開啟第二個互動視窗。

<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Hide this modal and show the first with the button below.
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
            </div>
        </div>
    </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

移除動畫

只需要在 .modal 中刪除 .fade ，即可移除淡入淡出的互動動畫。

親和性

務必請在 .modal 上添加 aria-labelledby="..." 來引用互動視窗標題，也可以在 .modal 上使用 aria-describedby 來描述你的動態視窗。請注意你不需要加上 role="dialog" ，因為 JavaScript 已經有添加了。

嵌入YouTube影片

在互動視窗上嵌入 YouTube 影片需要的 JavaScript 以自動停止重播或其他更多功能，欲了解更多請參閱 Stack Overflow 的文章。

大小選項

互動視窗有三個可選的大小，通過修改 .modal-dialog 上的 class 就可以，這些尺寸會在部分中斷點調整，看起來會在較窄的視窗上出現水平捲軸。

尺寸	Class	最大寬度
小	.modal-sm	300px
默認	-	500px
大	.modal-lg	800px
特大	.modal-xl	1140px

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

滿版互動視窗

跳出一個完全覆蓋用戶螢幕的互動，可以一直在 .modal-dialog 上視窗來支持。

Class	可用性
.modal-fullscreen （所有解析度皆全屏）	總是
.modal-fullscreen-sm-down （ sm 以下全屏）	576px 以下
.modal-fullscreen-md-down （ md 以下全屏）	768px 以下
.modal-fullscreen-lg-down （ lg 以下全屏）	992px 以下
.modal-fullscreen-xl-down （ xl 以下全屏）	1200px 以下
.modal-fullscreen-xxl-down （ xxl 以下全屏）	1400px 以下

F2E合作社｜modal燈箱效果｜Bootstrap 5網頁框架開發入門

前言

在開始使用導覽列之前，需要了解它們是如何運作

完整範例

靜態背景

滾動長內容

垂直置中

使用網格

不同的互動視窗內容

在互動視窗間切換

移除動畫

親和性

嵌入YouTube影片

大小選項

滿版互動視窗

參考資料

itiswonderfall

Related Posts

Comments

前言

在開始使用導覽列之前，需要了解它們是如何運作

完整範例

靜態背景

滾動長內容

垂直置中

使用網格

不同的互動視窗內容

在互動視窗間切換

移除動畫

親和性

嵌入YouTube影片

大小選項

滿版互動視窗

參考資料

itiswonderfall

Related Posts

The introduction and difference between class component and function component in React

Linkedin Java 檢定題庫 substring

Day 111

Comments